<template>
	<view>
		<view :style="{height:(barHeight+43)+'px'}"></view>
		<view :class="['container',scrollTop > 30 ? 'excessive_color' : '']">
			<view :style="{paddingTop:`${barHeight}px`}"></view>
			<view class="head_box">
				<view >
					<uni-icons v-show="isBackIcon" style="margin-left: 24rpx;" type="left" size="24" @click="onBack" color="#292929"></uni-icons>
				</view>
				<view style="text-align: center;">{{title}}</view>
				<view></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '',
			},
			isBackIcon: {
				type: Boolean,
				default: true
			},
			scrollTop: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				statusBarHeight: 24,
				barHeight: uni.getSystemInfoSync().statusBarHeight,
			}
		},
		 async created() {
			// const info = await uni.getSystemInfo();
			// if (info.safeArea) {
			// 	this.statusBarHeight = info.safeArea.top;
			// }
			// this.barHeight = `${(this.statusBarHeight * 2) + 24}px`;
			// // #ifdef H5
			// this.barHeight = `176rpx`;
			// // #endif
			// // #ifdef APP-PLUS
			// // #endif
		},
		methods: {
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.excessive_color {
		background-color: #fff;
	}

	.container {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 1000;

		.head_box {
			display: flex;
			height: 43px;
			// align-items: flex-end;
			justify-content: space-between;
			// height: calc(var(--status-bar-height) + 48rpx);
			font-weight: 500;
			font-size: 36rpx;
			color: #292929;
			// padding-top: calc(var(--status-bar-height) - 24rpx);
			// padding-bottom: 24rpx;

			view {
				width: 33.33%;
			}
		}
	}
</style>